<config lang="json">
{
  navigationBarTitleText: '任务列表',
  usingComponents: {

  }
}
</config>

<template>
  <div>
    <div class="task-list-header fixed-top">
      <div class="d-flex align-items-center task-list-header-title">
        <div class="mr-auto ml-2">
          <van-icon :name="'records.png'|imgUrl" />
          <span class="font-medium ml-1">{{year}}·{{quarter}}季度</span>
        </div>
        <div v-if="quarterEndDays" class="mr-1 count-down d-flex align-items-center justify-content-center">
          倒计时:{{user.quarterEndDays}}天
        </div>
      </div>
      <div class="d-flex align-items-center task-list-header-th col-wrapper-4">
        <div class="col">状态</div>
        <div class="col text-center">任务</div>
        <div class="col">得分</div>
        <div class="col">期限</div>
      </div>
    </div>

    <TaskList :customClass="'teacher-student-current-tasks'" :tasks="studentTasks"></TaskList>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'
import TaskList from '@/components/TaskList.vue'
@Component({
  components: {
    TaskList
  },
  filters: {}
})
export default class TeacherTasks extends Vue {
  public tasks: any = null;
  public quarterEndDays: boolean;
  @Getter unGradAndDelayStudents;

  public year;

  public quarter;

  public get studentTasks () {
    if (!this.tasks) {
      return []
    }
    this.$globalData.orderByTasks(this.tasks)
    return this.tasks
  }

  public get user () {
    return this.$globalData.appUser
  }

  public async created () {
    var id = this.$mp.options['id']
    this.year = this.$mp.options['year']
    this.quarter = this.$mp.options['quarter']
    this.quarterEndDays = this.$mp.options['quarterEndDays']
      ? this.$mp.options['quarterEndDays'] !== '0'
      : true

    if (this.year && this.quarter) {

    } else {
      this.year = this.user.year
      this.quarter = this.user.quarter
      // var currentQuarterData =
      //   this.unGradAndDelayStudents &&
      //   this.unGradAndDelayStudents.find(e => {
      //     return e.studentId === id
      //   })
      // this.tasks = currentQuarterData && currentQuarterData.tasks
    }
    var data = await this.$http.get({
      url: 'studyTask/tasks/' + id,
      data: {
        year: this.year,
        quarter: this.quarter
      }
    })
    this.tasks = data.items
  }
  public onShow () {}
}
</script>

<style lang="stylus" scoped>
.task-list-header {
  top: 0;
}

.teacher-student-current-tasks {
  padding-top: $task-list-header-title-height + $task-list-header-th-height;
}
</style>
